<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    button{
      position: fixed;
      bottom:50px;
      right:50px;
      display: none;
    }
  </style>
</head>
<body style="height:4000px">
  <div id="app">
    <button v-scroll="500">回到顶部</button>
  </div>
  <script src="./vue.js"></script>
  <script>
    
    const vm = new Vue({
      el: '#app',
      directives: {
        scroll: {
          inserted: function(el, binding){
            // 获取 传入 值
            const { value } = binding
            window.onscroll = function(){
              /* 
              判断 滚动距离 >value 显示
                          < value 消失
               */
              let sTop = document.documentElement.scrollTop||document.body.scrollTop
              if (sTop > value) {
                el.style.display = 'block'
              } else {
                el.style.display = 'none'
              }
            }
          },
          unbind: ()=>{
            window.onscroll = null
          }
        }
      }
    })
  </script>
</body>
</html>